<!-- 我的 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-title flex justify-center" :style="{'paddingTop': tabbarTop}">
				我的
			</view>
			<view style="height: 30rpx;">

			</view>
			<view class="user flex">
				<view class="user-img" v-if="loged">
					<image :src="item.avatar" mode="" lazy-load></image>
				</view>
				<view class="user-img" v-if="!loged">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/unlod.jpg" mode="" lazy-load></image>
					<u-icon name="account"></u-icon>
				</view>
				<view v-if="!loged" class="login">
					<text class="log" @click="login">登录</text>
				</view>
				<view class="user-info py-2 px-3" v-if="loged">
					<view class="user-name">
						{{item.nickname}}
					</view>
					<view class="user-vip flex align-center">
						<view class="imgs">
							<image :src="img(item.grade)" mode="" lazy-load></image>
						</view>
						<view class="imgs-name">
							<image :src="imgtxt(item.grade)" mode="" lazy-load></image>
						</view>
					</view>
					<view class="user-experience flex align-center">
						<view class="experience">
							<view class="user-experience-one">

							</view>
							<view class="user-experience-two" :style="{width: start + 'rpx'}">

							</view>
						</view>
						<view class="experience-numrate">
							{{item.userExperience}}/{{item.experience}}
						</view>
					</view>
				</view>
				<view class="user-set flex align-center">
					<view class="user-imgs" @click="setUp">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/setup.png" mode="" lazy-load>
						</image>
					</view>
				</view>
			</view>
			<view class="dynamic flex justify-between align-center"  v-if="loged">
				<view class="dynamic-item flex justify-center align-center flex-column" @click="linkCenter(item.userId)">
					<view class="num">
						{{item.attentionNum}}
					</view>
					<view class="text">
						动态
					</view>
				</view>
				
				<view class="dynamic-item flex justify-center align-center flex-column"  @click="linkFocous(0)">
					<view class="num">
						{{item.userAttentionNum}}
					</view>
					<view class="text">
						关注
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column"  @click="linkFocous(1)">
					<view class="num">
						{{item.fansNum}}
					</view>
					<view class="text">
						粉丝
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column"  @click="linkFocous(2)">
					<view class="num">
						{{item.visitorNum}}
					</view>
					<view class="text">
						访客
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column"  @click="linkFocous(3)">
					<view class="num">
						{{item.praisedNum}}
					</view>
					<view class="text">
						获赞
					</view>
				</view>
			</view>
			
			<view class="dynamic flex justify-between align-center" @click="linkFocous" v-if="!loged">
				<view class="dynamic-item flex justify-center align-center flex-column">
					<view class="num">
						--
					</view>
					<view class="text">
						动态
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column">
					<view class="num">
						--
					</view>
					<view class="text">
						关注
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column">
					<view class="num">
						--
					</view>
					<view class="text">
						粉丝
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column">
					<view class="num">
						--
					</view>
					<view class="text">
						访客
					</view>
				</view>
				<view class="dynamic-item flex justify-center align-center flex-column">
					<view class="num">
						--
					</view>
					<view class="text">
						获赞
					</view>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;">

		</view>
		<!-- 中心内容区域 -->
		<view class="content">
			<view class="list1">
				<view class="list1-item flex align-center" v-for="it in navlist" :key="it.id" @click="link1(it.id)">
					<view class="imgs">
						<image :src="it.src" mode="" lazy-load></image>
					</view>
					<view class="title">
						{{it.name}}
					</view>
					<view class="icon">
						<u-icon color="#999999" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view style="height: 30rpx;background-color: #f5f5f5;">

			</view>
			<view class="list1">
				<view class="list1-item flex align-center" v-for="it in sevlist" :key="it.id" @click="link2(it.id)">
					<view class="imgs">
						<image :src="it.src" mode="" lazy-load></image>
					</view>
					<view class="title">
						{{it.name}}
					</view>
					<view class="icon">
						<u-icon color="#999999" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;">

		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :border-top="false" :before-switch="click" inactive-color="#666666"
			active-color="#333333"></u-tabbar>
	</view>
</template>

<script>
	import {
		list,
		navlist,
		sevlist
	} from '@/data/my.js'
	import {
		viplist
	} from '@/data/vip.js'
	export default {
		data() {
			return {
				tabbar: this.$store.state.list, //tabbar数据
				tabbarTop: 0,
				list: [],
				navlist: [],
				sevlist: [],
				viplist,
				nickName: '',
				item: '',
				myQurey: {},
				loged: false
			}
		},
		onLoad() {
			this.init()
		},
		computed: {
			start() {
				return this.item.userExperience / this.item.experience * 160
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			//初始化
			init() {
				this._setTabbarTitleHeight()
				this._getNumRate()
				this.list = list
				this.navlist = navlist
				this.sevlist = sevlist
				// this.viplist = viplist
				if (uni.getStorageSync('openId')) {
					this.avatar = uni.getStorageSync('avatar')
					this.nickName = uni.getStorageSync('nickName')
					this.getData()
				}
			},
			linkCenter(id){
				uni.setStorageSync('center',id)
				uni.navigateTo({
					url: '../../pagesB/personalCenter/personalCenter'
				})
			},
			//获取图片
			img(e) {

				return this.viplist[e].vip
			},
			login() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			imgtxt(e) {
				return this.viplist[e].txt
			},
			//设置title高度
			_setTabbarTitleHeight() {
				let top = uni.getStorageSync('tabbarCapsule')
				this.tabbarTop = top.top + 'px'
			},
			//获取经验条的值
			_getNumRate() {
				this.width = 100 + 'rpx'
			},
			//点击设置进行跳转
			setUp() {
				if(uni.getStorageSync('openId')){
					uni.navigateTo({
					url: '/pagesA/setUp/setUp'
					})
				}else{
					return
				}

			},
			//前往关注与粉丝页面
			linkFocous(id) {
				if(uni.getStorageSync('openId')){
					uni.navigateTo({
					url: '/pagesB/focous/focous?id=' + id 
				})
				}else{
					return
				}
				
			},
			//请求我的页面数据
			async getData() {
				let {
					data: item,
					code
				} = await this.$get('/user/UserInformation')
				if (code == 200) {
					this.loged = true
					this.item = item
				}

			},
			//功能列表的点击事件
			link1(e) {
				switch (e) {
					case 0:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/resume/resume'
							})
						} else {
							return
						}

						break;
					case 1:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/myCoins/myCoins'
							})
						} else {
							return
						}

						break;
					case 2:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/myWallet/myWallet'
							})
						} else {
							return
						}

						break;
					case 3:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/myCollection/myCollection'
							})
						} else {
							return
						}

						break;
					case 4:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/certificationAdministration/certificationAdministration'
							})
						} else {
							return
						}

						break;
					case 5:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/myActivity/myActivity'
							})
						} else {
							return
						}

						break;
				}
			},
			link2(e) {
				switch (e) {
					case 0:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/serviceCenter/serviceCenter'
							})
						} else {
							return
						}

						break;
					case 1:
						if (uni.getStorageSync('openId')) {
							uni.navigateTo({
								url: '/pagesA/aboutUs/aboutUs'
							})
						} else {
							return
						}

						break;
				}
			},
			//tabbar切换前的回调
			click(e) {
				return true
			},
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		//padding-bottom: env(safe-area-inset-bottom);
		background-color: #f5f5f5;

		.tabbar {
			height: 430rpx;
			background: url('https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/topbarbc.png') no-repeat; //顶部导航背景色
			background-size: 100% 100%;
			position: relative;

			.tabbar-title {
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: 600;
			}

			.user {
				height: 160rpx;
				padding: 0 30rpx;

				.login {
					.log {
						position: relative;
						top: 34rpx;
						left: 16rpx;
						font-size: 46rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
				}

				.user-img {
					width: 124rpx;
					height: 124rpx;
					border: 2px solid #F5F5F5;
					border-radius: 50%;
					overflow: hidden;
					u-icon{
						width: 100%;
						height: 100%;
						background-color: #FFFFFF;
						font-size: 124rpx;
					}
				}

				.user-info {
					.user-name {
						font-size: 34rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.user-vip {
						.imgs {
							width: 50rpx;
							height: 50rpx;
						}

						.imgs-name {
							width: 120rpx;
							height: 26rpx;
						}
					}

					.user-experience {
						height: 30rpx;
						position: relative;

						.experience {
							margin-right: 10rpx;

							.user-experience-one {
								width: 160rpx;
								height: 4rpx;
								background: #EFEFEF;
								opacity: 0.5;
								border-radius: 2px;
							}

							.user-experience-two {
								height: 4rpx;
								background: #FFFFFF;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
							}
						}

						.experience-numrate {
							font-weight: 500;
							color: #FFFFFF;
							font-size: 24rpx;
						}
					}
				}

				.user-set {
					height: 124rpx;
					margin-left: auto;

					.user-imgs {
						width: 46rpx;
						height: 43rpx;
					}
				}
			}

			.dynamic {
				width: 690rpx;
				height: 153rpx;
				margin: 20rpx auto 0;
				padding: 30rpx 60rpx 35rpx 60rpx;
				background: url("https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/cardbc.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				bottom: -100rpx;
				left: 30rpx;

				.dynamic-item {
					width: 60rpx;

					.num {
						font-weight: bold;
						color: #333333;
						font-size: 36rpx;
					}

					.text {
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
		}

		.content {
			.list1 {
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 10rpx 30rpx;
				overflow: hidden;

				.list1-item {
					height: 100rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.12);

					.imgs {
						height: 33rpx;
						width: 33rpx;
					}

					.title {
						font-size: 28rpx;
						color: #333333;
						margin-left: 30rpx;
					}

					.icon {
						margin-left: auto;
					}
				}

				.list1-item:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
